<script lang="tsx">
/**
 * 首页
 */
export default {
  name: "index"
}
</script>

<script lang="tsx" setup>
import {computed, ref} from "vue"
import MenuForm from "@/components/menu-form/index.vue"
import RecordForm from "@/components/record-form/index.vue"

/**
 * 滚动
 */
const scrollTop = ref(0)
const isRun = computed(() => scrollTop.value > 60)
const handleScroll = (e: any) => {
  scrollTop.value = e.scrollTop
}
</script>

<template>
  <div class="page-wrap">
    <el-scrollbar style="height: 100%" @scroll="handleScroll">
      <div class="page-container">
        <div class="page-header">
          <MenuForm :isRun="isRun"/>
        </div>
        <div class="page-body">
          <div class="container">
            <router-view></router-view>
          </div>
        </div>
        <div class="page-footer">
          <RecordForm/>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">
</style>
